<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-main>
      <el-scrollbar>
        <el-table :data="tableData">
          <el-table-column prop="id" label="订单编号" />
          <el-table-column prop="shopId" label="店铺id" />
          <el-table-column prop="commodityIdList" label="商品id list" />
          <el-table-column prop="commodityNumberList" label="数量list" />
          <el-table-column prop="deliverAddressId" label="收货地址" />
          <el-table-column prop="creationTime" label="订单创建时间" />
          <el-table-column prop="paymentTime" label="订单支付时间" />
          <el-table-column prop="sendTime" label="订单发货时间" />
          <el-table-column prop="" label="操作">
            <template #default="scope">
              <p></p>
              <el-button @click="openOrderPayDialog(scope.row.id)"
                v-if="scope.row.paymentTime == '0' || scope.row.paymentTime == null">
                去支付
              </el-button>
              <el-button @click="openOrderEvaluateDialog(scope.row.id)"
                v-if="scope.row.sendTime != '0' || scope.row.sendTime != null">
                评价
              </el-button>
              <el-button @click="openOrderEvaluateDialog(scope.row.id)" v-if="true">
                查看评价
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
    <order-pay ref="orderPayRef" />
    <evaluate-c-u ref="evaluateCURef" />
  </el-container>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import { getOrderByJwt } from "../../api/order/"
import { ElContainer } from 'element-plus';
import OrderPay from './OrderPay.vue';
import EvaluateCU from './EvaluateCU.vue'

// 打开订单支付页面
let orderPayRef = ref()
const openOrderPayDialog = (orderId: number) => {
  //子组件方法
  orderPayRef.value.openDialog(orderId);
}

// 打开订单评价页面
let evaluateCURef = ref()
const openOrderEvaluateDialog = (orderId: number) => {
  //子组件方法
  evaluateCURef.value.openDialog(null,orderId);
}

// 获取个人订单
const Order = getOrderByJwt({})
let tableData = ref([])
Order.then((res) => {
  if (res.code === 200) {
    tableData.value = res.data
  }
})


</script>
  
<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
  